<template>
  <page-body>
    <view class="page">
      <view class="flex benben-position-layout flex flex-wrap align-center custr_flex_0"
        :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
        <view class='flex flex-wrap align-center justify-between flex-sub custr_fd0_0'>
          <view class='flex flex-wrap align-center custr_fd0_0_c0' @tap.stop="handleJumpDiy" data-type="back"
            data-url="1">
            <text class='fu-iconfont2  custr_fd0_0_c0_c0'>&#xE794;</text>
          </view>
          <view class='flex flex-wrap align-stretch justify-center'>
            <text class='custr_fd0_0_c1_c0'>客户详情</text>
          </view>
          <view class='flex flex-wrap align-center justify-end custr_fd0_0_c0'>
          </view>
        </view>

      </view>
      <view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
      <!---flex布局flex布局开始-->

      <view class="flex flex-direction align-stretch benben-flex-layout custr_flex_1">
        <view class='flex flex-wrap align-center justify-between custr_fd1_0'>
          <image class='custr_fd1_0_c0' mode="aspectFit" :src='STATIC_URL+"151.png"'></image>
          <view class='flex flex-direction align-stretch flex-sub custr_fd1_0_c1'>
            <view class='flex flex-wrap align-center custr_fd1_0_c1'>
              <text>{{info.customer_name}}</text>
              <image class='custr_fd1_0_c1_c0_c1' mode="aspectFit" v-if="info.customer_types==3"
                :src='STATIC_URL+"155.png"'></image>
              <image class='custr_fd1_0_c1_c0_c1' mode="aspectFit" v-if="info.customer_types==1"
                :src='STATIC_URL+"152.png"'></image>
              <image class='custr_fd1_0_c1_c0_c1' mode="aspectFit" v-if="info.customer_types==2"
                :src='STATIC_URL+"153.png"'></image>
              <image class='custr_fd1_0_c1_c0_c1' mode="aspectFit" v-if="info.customer_types==4"
                :src='STATIC_URL+"162.png"'></image>
            </view>
            <view class='flex flex-wrap align-center custr_fd1_0_c1_c1'>
              <text>{{info.customer_phone}}</text>
            </view>
          </view>
          <button class='custr_fd1_0_c2' @tap.stop="handleJumpDiy" data-type="navigateTo"
            :data-url="`/pages/grzx/newCustomer/newCustomer?aid=${aid}`">编辑</button>
        </view>
        <view class='flex flex-wrap align-end custr_fd1_1'>
          <text class='custr_fd1_1_c0'>婚期日期</text>
          <text>{{info.date_time}}</text>
        </view>
        <view class='flex flex-wrap align-end custr_fd1_1'>
          <text class='custr_fd1_1_c0'>来源</text>
          <text>{{info.source_name}}</text>
        </view>
        <view class='flex flex-wrap align-end custr_fd1_1'>
          <text class='custr_fd1_1_c0'>婚礼酒店</text>
          <text>{{info.wedding_hotel|| '暂未填写'}}</text>
        </view>
        <view class='flex flex-wrap align-start custr_fd1_1'>
          <view class='custr_fd1_1_c0'>对比商家</view>
          <view class="" style="width:500rpx;">{{info.comparison_merchant || '暂未填写'}}</view>
        </view>
        <view class='flex flex-wrap align-start custr_fd1_1'>
          <view class='custr_fd1_1_c0'>五大金刚</view>
          <view class="" style="width: 500rpx;"> {{info.five_kong|| '暂未填写'}}</view>
        </view>
        <view class='flex flex-wrap align-start custr_fd1_1'>
          <view class='custr_fd1_1_c0'>客户分析</view>
          <view class="" style="width: 500rpx;">{{info.customer_analysis|| '暂未填写'}}</view>
        </view>
        <view class='flex flex-wrap align-start custr_fd1_1'>
          <view class='custr_fd1_1_c0'>改进方法</view>
          <view class="" style="width: 500rpx;">{{info.improvement_method|| '暂未填写'}}</view>
        </view>
      </view>

      <!---flex布局flex布局结束-->
      <!---flex布局flex布局开始-->
      <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout custr_flex_2">
        <view>
          <benben-flex-tabs class-name='custr_benbenTabsfd2_0' v-model="cateId" ref="benben_tabsfd2_0"
            select-mark="benben_tabsfd2_0" key="benben_tabsfd2_0" :open-title-type='false' :open-sticky='false' :top='0'
            :is-show-content='false' :scrollspy='false' :tabs-info.sync="tabsInfofd2_0">

            <scroll-view @scroll="tabsInfofd2_0.scrollX = $event.detail.scrollLeft" id="benben_tabsfd2_0"
              class="benben-tabs" style="width:750rpx" :scroll-x="true" :scroll-left.sync="tabsInfofd2_0.moveX"
              scroll-with-animation="all .3s ease">
              <view class="benben-tabs-content" id="benben_tabsfd2_0-content">
                <view id="benben_tabsfd2_0-title" class="benben-tabs-title flex flex align-center justify-around">
                  <view :class="{ 'checkTitlefd2_0': cateId == '1', 'flex flex-wrap align-center': true }"
                    @tap="cateId = '1'" :id="`benben_tabsfd2_0-title-item-${'1'}`">

                    <text>跟进记录</text>

                  </view>
                  <view :class="{ 'checkTitlefd2_0': cateId == '2', 'flex flex-wrap align-center': true }"
                    @tap="cateId = '2'" :id="`benben_tabsfd2_0-title-item-${'2'}`">

                    <text>量体尺寸</text>

                  </view>
                </view>
                <view :style="{ left: tabsInfofd2_0.lineleft, maxWidth: tabsInfofd2_0.lineWidth ,}"
                  id="benben_tabsfd2_0-line" class="benben-tabs-line flex benben-flex-tabs-line custr_linefd2_0">
                </view>
              </view>
            </scroll-view>

          </benben-flex-tabs>

        </view>
        <view class='flex flex-wrap align-center custr_fd2_1' v-if=" cateId=='2'">
          <view class='flex flex-wrap align-center justify-center '
            :class="item.aid==typeId ? 'custr_fd2_1_c0' : 'custr_fd2_1_c1'" v-for="(item,index ) in typeList"
            :key="index" @click.stop="chooseCate(item)">
            <text>{{item.name}}</text>
          </view>
          <!--     <view class='flex flex-wrap align-center justify-center custr_fd2_1_c0'>
            <text>新娘</text>
          </view>
          <view class='flex flex-wrap align-center justify-center custr_fd2_1_c1'>
            <text>新郎</text>
          </view> -->
        </view>
        <view class='flex flex-wrap align-center custr_fd2_2' v-if=" cateId=='2' && typeId==1 ">
          <view class='flex flex-direction flex-wrap align-stretch custr_fd2_2_c0' v-for="(item,index ) in bride_info"
            :key="index" v-if="index<22">
            <text>{{item.name}}</text>
            <input class='custr_fd2_2_c0_c1' type="text" confirm-type="done" :maxlength="6" :adjust-position='true'
              disabled v-model="item.value" placeholder-style="color:#999;font-size:28rpx" />
          </view>

        </view>
        <view class="bg-white custr_fd2_2" v-if=" cateId=='2' && typeId==1">
          <view class="padding-lr-sm">
            <view class="text-333 margin-tb-sm text-df">{{bride_info[22].name}}</view>
            <view class="text-333 text-df base-desc">{{bride_info[22].value}}</view>
            <view class="text-333 margin-tb-sm text-df" v-if="bride_info[23].value.length">{{bride_info[23].name}}
            </view>
            <view class="flex" v-if="bride_info[23].value.length">
              <view class='flex align-center' v-for='(itemC,key0) in bride_info[23].value' :key='key0'
                @click.stop="prevImage(bride_info[23].value,key0)">
                <image class="custr_fd2_3_c2_c0" mode="aspectFill" :src='itemC' @tap.stop="multiImagePreview">
                </image>
              </view>
            </view>

          </view>

        </view>
        <view class='flex flex-wrap align-center custr_fd2_2' v-if=" cateId=='2' && typeId==2">
          <view class='flex flex-direction flex-wrap align-stretch custr_fd2_2_c0' v-for="(item,index ) in groom_array"
            v-if="index<22">
            <text>{{item.name}}</text>
            <input class='custr_fd2_2_c0_c1' type="text" confirm-type="done" :maxlength="6" :adjust-position='true'
              disabled v-model="item.value" placeholder-style="color:#999;font-size:28rpx" />
          </view>
        </view>
        <view class="bg-white custr_fd2_2" v-if=" cateId=='2' && typeId==2">
          <view class="padding-lr-sm">
            <view class="text-333 margin-tb-sm text-df">{{groom_array[22].name}}</view>
            <view class="text-333 text-df base-desc">{{groom_array[22].value}}</view>
            <view class="text-333 margin-tb-sm text-df" v-if="groom_array[23].value.length">{{groom_array[23].name}}
            </view>
            <view class="flex" v-if="groom_array[23].value.length">
              <view class='flex align-center' v-for='(itemC,key0) in groom_array[23].value' :key='key0'
                @click.stop="prevImage(groom_array[23].value,key0)">
                <image class="custr_fd2_3_c2_c0" mode="aspectFill" :src='itemC' @tap.stop="multiImagePreview">
                </image>
              </view>
            </view>

          </view>

        </view>
        <view class='flex flex-direction align-stretch custr_fd2_3' v-if=" cateId=='1'" v-for="(item,index) in dataList"
          :key="index">
          <view class='flex flex-wrap align-center flex-sub custr_fd2_3_c0'>
            <text class='custr_fd2_3_c0_c0'>跟进方式</text>
            <view>{{item.follow_method_name}}</view>
          </view>
          <view class='flex flex-wrap align-stretch self-center flex-sub custr_fd2_3_c0'>
            <text class='custr_fd2_3_c0_c0'>跟进内容</text>
            <view style="width: 460rpx;">{{item.follow_content}}</view>
          </view>
          <template v-for='(itemC,key0) in item.follow_image'>
            <view class='flex flex-wrap align-center' :key='key0' @click.stop="prevImage(item.follow_image,key0)">
              <image class='custr_fd2_3_c2_c0' mode="aspectFill" :src='itemC' @tap.stop="multiImagePreview"></image>
            </view>
          </template>

          <view class='flex flex-wrap align-center custr_fd2_3_c3'>
            <text class='custr_fd2_3_c0_c0'>记录人</text>
            <image class='custr_fd2_3_c3_c1' mode="aspectFill" :src='item.user_avatar'></image>
            <text class='custr_fd2_3_c3_c2'>{{item.user_nickname}}</text>
          </view>
          <view class='flex flex-wrap align-center flex-sub'>
            <text class='custr_fd2_3_c4_c0'>{{item.create_time}}</text>
          </view>
        </view>
        <fu-empty :pagingListLoadedAll="pagingListLoadedAll" :pagingListNoListData="pagingListNoListData"
          v-if=" cateId=='1'" :listDataLength="listDataLength" :isLoadInit="isLoadInit"></fu-empty>
      </view>

      <!---flex布局flex布局结束-->
      <view class="flex flex-wrap align-center justify-center benben-position-layout flex custr_flex_3"
        @tap.stop="handleJumpDiy" data-type="navigateTo" :data-url="`/pages/grzx/newfollowup/newfollowup?aid=${aid}`">
        <text>新建
          跟进</text>

      </view>
      <view :style="{height: '128rpx'}"></view>


    </view>
  </page-body>
</template>
<script>
  import pagingList from '@/common/mixin/paging_list.js';
  export default {
    components: {},
    mixins: [pagingList],

    data() {
      return {
        "tabsInfofd2_0": {
          lineleft: '',
          lineWidth: '',
          moveX: 0,
          scrollX: 0,
          PageScrollX: 0
        },
        "dataList": [],
        "cateId": "1",
        "images": [],
        aid: '',
        info: null,
        "minixPagingListsApi": "",
        "pageingListApiMethod": "",
        "allowOnloadGetList": false,
        dataList: [],
        typeList: [{
          aid: 1,
          name: '新娘'
        }, {
          aid: 2,
          name: '新郎'
        }],
        groom_array: [],
        bride_info: [],
        typeId: '1'
      };
    },
    computed: {

    },
    watch: {},
    onLoad(options) {
      let {
        aid
      } = options
      if (aid !== undefined) this.aid = aid
      if (aid) {

      }
    },
    onUnload() {

    },
    onReady() {

    },
    onShow() {
      this.getDetail()
      this.getListFunc()

    },
    onHide() {

    },
    onResize() {

    },
    onPullDownRefresh() {

    },
    onReachBottom(e) {

    },
    onPageScroll(e) {

    },
    methods: {
      prevImage(list, index) {
        uni.previewImage({
          urls: list,
          current: index
        })
      },
      chooseCate(item) {
        this.typeId = item.aid
        console.log('pp', this.typeId)
      },
      getListFunc() {
        this.minixPagingListsApi = global.apiUrls.post666d5d9829425;
        this.pageingListApiMethod = 'post';
        this.allowOnloadGetList = false;
        this.pagingListPostDataContent = {
          customerinfo_id: this.aid
        }
        this.listData = [];
        this.dataList = this.listData;
        this.pagingListToggle();

      },
      pagingListPostData() {
        return this.pagingListPostDataContent
      },
      getDetail() {
        let that = this
        that.$api.post(global.apiUrls.post666ceed1b0826, {
          aid: that.aid
        }).then(res => {
          if (res.data.code == 1) {
            that.info = res.data.data
          }
        })
        that.$api.post(global.apiUrls.post666d627421981, {
          aid: that.aid
        }).then(res => {
          if (res.data.code == 1) {
            that.bride_info = res.data.data.bride_info
            that.groom_array = res.data.data.groom_array
          }
        })
      },
    }
  };
</script>
<style lang="scss" scoped>
  .base-desc {
    width: 630rpx;
    padding: 24rpx;
    background-color: #EEEEEE;
  }

  .page {
    width: 100vw;
    overflow-x: hidden;
    min-height: calc(100vh - var(--window-bottom));
    background: rgba(255, 248, 238, 1);
    background-size: 100% auto;
  }

  .custr_flex_0 {
    background: #fff;
    width: 750rpx;
    height: 88rpx;
    overflow: hidden;
    z-index: 10;
    top: 0rpx;
    background-size: 100% auto !important;
  }

  .custr_fd0_0_c1_c0 {
    font-size: 36rpx;
    font-weight: 700;
    color: #333333;
    line-height: 50rpx;
  }

  .custr_fd0_0_c0_c0 {
    font-size: 36rpx;
    color: #333;
  }

  .custr_fd0_0_c0 {
    width: 120rpx;
  }

  .custr_fd0_0 {
    padding: 0rpx 32rpx 0rpx 32rpx;
  }

  .custr_flex_1 {
    background: rgba(255, 255, 255, 1);
    margin: 26rpx 24rpx 0rpx 24rpx;
    padding: 24rpx;
    border-radius: 26rpx;
    background-size: 100% auto;
  }

  .custr_fd1_1_c0 {
    color: rgba(170, 170, 170, 1);
    width: 150rpx;
  }

  .custr_fd1_1 {
    padding: 24rpx 0rpx 0rpx 0rpx;
    font-size: 28rpx;
  }

  .custr_fd1_0_c2 {
    background: #F9E4C3;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    width: 136rpx;
    line-height: 60rpx;
    font-size: 24rpx;
    color: var(--benbenFontColor0);
    height: 60rpx;
  }

  .custr_fd1_0_c1_c1 {
    margin: 16rpx 0rpx 0rpx 0rpx;
  }

  .custr_fd1_0_c1_c0_c1 {
    width: 115rpx;
    height: 34rpx;
    margin: 0rpx 0rpx 0rpx 16rpx;
  }

  .custr_fd1_0_c1 {
    font-size: 32rpx;
    font-weight: 600;
  }

  .custr_fd1_0_c0 {
    width: 62rpx;
    height: 67rpx;
    margin: 0rpx 24rpx 0rpx 0rpx;
  }

  .custr_fd1_0 {
    border-bottom: 1px solid #eee;
    padding: 0rpx 0rpx 24rpx 0rpx;
  }

  .custr_flex_2 {
    padding: 0rpx 0rpx 150rpx 0rpx;
  }

  .custr_fd2_3_c4_c0 {
    width: 250rpx;
    color: rgba(153, 153, 153, 1);
  }

  .custr_fd2_3_c3_c2 {
    margin: 0rpx 0rpx 0rpx 24rpx;
  }

  .custr_fd2_3_c3_c1 {
    width: 56rpx;
    height: 56rpx;
    border-radius: 100rpx;
  }

  .custr_fd2_3_c3 {
    margin: 32rpx 0rpx 32rpx 0rpx;
  }

  .custr_fd2_3_c2_c0 {
    width: 184rpx;
    height: 184rpx;
    border-radius: 16rpx;
    margin: 16rpx 16rpx 0rpx 0rpx;
  }

  .custr_fd2_3_c0_c0 {
    width: 150rpx;
    color: rgba(153, 153, 153, 1);
  }

  .custr_fd2_3_c0 {
    margin: 24rpx 0rpx 0rpx 0rpx;
  }

  .custr_fd2_3 {
    background: var(--benbenbgColor1);
    width: 686rpx;
    border-radius: 16rpx;
    background-size: 100% auto;
    margin: 24rpx auto 0rpx auto;
    padding: 0rpx 24rpx 24rpx 24rpx;
  }

  .custr_fd2_2_c0_c1 {
    background: #EEEEEE;
    border-radius: 8rpx;
    width: 190rpx;
    height: 64rpx;
    line-height: 64rpx;
    margin: 16rpx 0rpx 0rpx 0rpx;
    padding: 0rpx 0rpx 0rpx 16rpx;
  }

  .custr_fd2_2_c0 {
    margin: 32rpx 0rpx 0rpx 30rpx;
  }

  .custr_fd2_2 {
    background: var(--benbenbgColor1);
    width: 686rpx;
    background-size: 100% auto;
    border-radius: 16rpx;
    margin: 0rpx auto 0rpx auto;
    padding: 0rpx 20rpx 32rpx 0rpx;
  }

  .custr_fd2_1_c1 {
    background: var(--benbenbgColor1);
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    width: 343rpx;
    height: 88rpx;
  }

  .custr_fd2_1_c0 {
    background: #F9E4C3;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    width: 343rpx;
    height: 88rpx;
  }

  .custr_fd2_1 {
    background: var(--benbenbgColor1);
    background-size: 100% auto;
    border-radius: 16rpx;
    width: 690rpx;
    margin: 24rpx auto 24rpx auto;
  }

  .custr_linefd2_0 {
    background: rgba(228, 195, 145, 1);
    width: 80rpx;
    height: 10rpx;
    top: 80rpx;
    background-size: 100% auto !important;
    border-radius: 8rpx;
  }

  .checkTitlefd2_0 {
    font-weight: 700 !important;
    font-size: 28rpx !important;
    color: #333 !important;
    background-color: #FFF8EE !important;
  }

  ::v-deep .custr_benbenTabsfd2_0 {
    width: 686rpx;
    height: 90rpx;
    white-space: nowrap;
    text-align: center;
  }

  .custr_flex_3 {
    background: #FFFFFF;
    width: 128rpx;
    height: 128rpx;
    overflow: hidden;
    z-index: 10;
    right: 32rpx;
    bottom: calc(150rpx + var(--window-bottom));
    box-shadow: 0rpx 3rpx 15rpx 1rpx rgba(223, 188, 134, 0.51);
    border-radius: 100rpx;
  }
</style>
